<template>
  <div>
    <!-- 排行榜页 -->
    <div class="topheader">
      <div class="img">
        <img :src="lists.coverImgUrl" alt="" />
      </div>
      <div class="title">
        {{ lists.name }}
      </div>
      <div class="titleNum">
        <i class="iconfont icon-bofang"></i>{{ lists.playCount | playCountData }}
      </div>
      <div class="button" @click="$router.go(-1)">
        <span class="iconfont icon-fanhui"></span>
        排行榜
      </div>
    </div>
    <songcls :playlist="lists"></songcls>
    <MusicList :songs="songs"></MusicList>
    <loadMore v-show="songs == ''"></loadMore>
  </div>
</template>

<script>
import { getPlayListDetail } from "@/api/home";
import { getsongListAllTheSongs } from "@/api/songitem";
import MusicList from "@/components/MusicList.vue";
import loadMore from "@/components/LoadMore.vue";
import songcls from "@/components/Songcls.vue";
export default {
  components: {
    MusicList,
    loadMore,
    songcls,
  },
  data() {
    return {
      // lists: {
      //   tracks: [],
      //   coverImgUrl: null,
      // },
      lists:[],
       
      songs: [],
    };
  },
  // 过滤器
  filters: {
    playCountData(value) {
      let val = Math.floor(value / 1000);
      let w = value > 10000 ? val / 10 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : w + "万"; //亿计算
      return y;
    },
  },
  computed: {},
  methods: {},
  mounted() {},
  created() {
    //歌曲列表
    getsongListAllTheSongs(this.$route.query.id).then((data) => {
      if (data.code == 200) {
        this.songs = data.songs;
      }
    });
    // 榜单详情
      getPlayListDetail({ id: this.$route.query.id }).then((data) => {
        console.log(data);
      this.lists = data.playlist;
    });
  },
  beforeDestroy() {
   
  },
};
</script>

<style lang="scss">
// 排行榜头部样式
.topheader {
  height: 230px;
  // background-color: aqua;
  position: relative;
  overflow: hidden;

  .img {
    width: 100%;
    position: relative;
    height: 270px;

    img {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: auto;
      width: 100%;
    }
  }

  .button {
    position: absolute;
    top: 10px;
    left: 0px;
    font-weight: bold;
    color: #fff;
    height: 18px;
    line-height: 18px;

    span {
      font-size: 18px;
      margin: 0px 5px 0px 10px;
      vertical-align: top;
    }
  }

  .title {
    text-indent: 14px;
    position: absolute;
    left: 0px;
    bottom: 35px;
    font-size: 17px;
    height: 20px;
    color: #fff;
    overflow: hidden;
  }

  .titleNum {
    position: absolute;
    bottom: 18px;
    left: 14px;
    color: #fff;
    font-size: 12px;

    i {
      transform: scale(0.8);
      margin-top: -2px;
      display: inline-block;
      vertical-align: middle;
    }
  }
}

// 歌单留言评论分享样式
.song-cls {
  width: 70%;
  height: 40px;
  background-color: #fff;
  margin: 0 auto;
  position: absolute;
  left: 15%;
  right: 15%;
  margin-top: -20px;
  border-radius: 30px;
  border: 1px solid #ccc;

  .song-cls-item {
    display: flex;
    text-align: center;
    width: 100%;
    font-size: 16px;

    span {
      padding-left: 3px;
    }

    // 收藏
    .collect {
      margin-top: 10px;
      flex: 1;
    }

    // 留言
    .leaveWord {
      flex: 1;
      margin-top: 10px;
      border-left: 1px solid #ccc;
    }

    // 分享
    .share {
      flex: 1;
      margin-top: 10px;
      border-left: 1px solid #ccc;
    }
  }
}
</style>